<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- v-cloak 配合 style 设置，能解决插值表达式闪烁的问题 -->
    <!-- 注意观察，123 和 +++ ---- 之间到底有没有空格 -->
    <!-- 插值表达式是部分替换，是仅替换插值部分 -->
    <p v-cloak>+++++{{ msg }}--------</p>
    <!-- v-text是不会有闪烁问题的 -->
    <!-- v-text是全部替换，会覆盖元素中原有的内容：网页上将没有===== -->
    <h4 v-text="msg">==========</h4>
    <!-- 插值表达式和v-text都是将数据原模原样地展示 -->
    <div>{{ msg2 }}</div>
    <div v-text="msg2"></div>
    <!-- v-html 可以解析数据中的 html 设置，让其HTML代码生效 -->
    <div v-html="msg2"></div>

    <!-- v-bind 是 vue 中提供的用于绑定属性的值为某个数据的指令 -->
    <input type="button" value="v-bind展示按钮" v-bind:title="mytitle">
    <!-- v-bind:<$属性名>="..." 可以被简写且通常被简写为 :<$属性名>="..." -->
    <!-- 例如 :title="mytitle" -->
    <input type="button" value="v-bind简写按钮" :title="mytitle">
    <!-- v-bind之后设置的属性的值，不再是单纯的字符串，而是支持合法的JS表达式 -->
    <input type="button" value="v-bind:JS表达式" :title="mytitle+'\nHello\nGood Night'">
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "123",
      msg2: "<h1>我是一级标题我自豪</h1> ",
      mytitle: '设置HTML标签的属性的值为Vue实例中保存的数据'
    },
  });
</script>

</html>